<template>
  <div>
    <div v-loading="loading" class="panel">
      <i-form
        ref="form"
        class="weixin-form"
        :items="formItems"
        :rules="rules"
        :model="form"
        :inline="true"
        :layout-span="18"
      >
        <template slot="date">
          <el-form-item label="日期">
            <SearchDatePicker
              :start.sync="form.startTime"
              :end.sync="form.endTime"
              :disable-date="{
                range: 3 * 31 * 24 * 3600 * 1000,
                banTomorrow: true,
              }"
            />
          </el-form-item>
        </template>
      </i-form>
      <el-button
        type="primary"
        @click="handleExport"
        class="export-btn"
        :loading="loading"
        >导出</el-button
      >
    </div>
  </div>
</template>
<script>
import SearchDatePicker from '@/components/SearchDatePicker'
import { exportWeiXinBillExcel } from '@/api/transation'
import { exportExcel } from '@/utils'
export default {
  name: 'TransationReconciliationList',
  components: { SearchDatePicker },
  data() {
    return {
      formItems: [
        {
          slot: 'date',
          span: 24,
        },
      ],
      rules: {},
      form: {
        startTime: new Date().valueOf() - 31 * 24 * 3600 * 1000,
        endTime: new Date().valueOf() - 24 * 60 * 60 * 1000,
      },
      loading: false,
    }
  },
  methods: {
    handleExport() {
      this.loading = true
      exportWeiXinBillExcel(this.form).then(
        (res) => {
          exportExcel(res, '微信对账单')
          this.loading = false
        },
        () => {
          this.loading = false
        }
      )
    },
  },
  mounted() {},
}
</script>
<style lang="scss" scoped>
.panel {
  display: flex;
}
.weixin-form {
  width: 80%;
}
</style>
